<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>学生管理页面</title>
  <!-- 新 Bootstrap5 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">

  <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
  <script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script>

  <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
  <style>
    .person{
      width: 300px;
      margin: 100px auto;
    }
    .person.btn{
      width: 300px;
    }
  </style>

</head>
<body>
<div th:replace="~{common :: navbar}"></div>
<div class="person">
  <h3>个人资料</h3>
  <form th:action="@{'/updateperson/' + ${user.id}}" method="post">
    <div class="mb-3 mt-3 ">
      <label for="username" class="form-label">用户名</label>
    </div>
    <div class="mb-3 mt-3 ">
      <input type="text" class="form-control" id="username" placeholder="" name="username"
             th:value="${user.username}">
    </div>

    <div class="mb-3 mt-3 ">
      <label for="phone" class="form-label">电话号码</label>
    </div>
    <div class="mb-3 mt-3 ">
      <input type="text" class="form-control" id="phone" placeholder="" name="phone"
             th:value="${user.phone}">
    </div>
    <div class="mb-3 mt-3 ">
      <label for="qq" class="form-label">QQ号码</label>
    </div>
    <div class="mb-3 mt-3 ">
      <input type="text" class="form-control" id="qq" placeholder="" name="qq"
             th:value="${user.qq}">
    </div>
    <div class="mb-3 mt-3 ">
      <label for="email" class="form-label">邮箱</label>
    </div>
    <div class="mb-3 mt-3 ">
      <input type="text" class="form-control" id="email" placeholder="" name="email" th:value="${user.email}">
    </div>
    <button type="submit" class="btn btn-primary">保存</button>
  </form>
</div>
</body>
</html>